<template>
  <div>
    <!-- 工具栏 -->
    <page-tools :show-before="true">

      <!-- 前面内容开始 -->
      <template v-slot:before>有 {{ pageList.total }} 条考勤审批尚未处理</template>
      <template v-slot:after>
        <el-button size="mini" type="danger" @click="$router.push('/import?type=attendance')">导入</el-button>
        <el-button size="mini" type="warning">提醒</el-button>
        <el-button size="mini" type="primary">设置</el-button>
        <el-button size="mini" type="default" @click="$router.push('/attendances/archiving/')">历史归档</el-button>
        <el-button size="mini" type="primary" @click="$router.push({'path':'/attendances/report/'+ yearMonth})">报表</el-button>
      </template>
    </page-tools>
    <!-- 前面内容结束 -->

    <!-- 部门过滤开始 -->
    <el-card class="hr-block">
      <el-form ref="formData" label-width="120px" class="formInfo">
        <el-form-item label="部门过滤：">
          <el-checkbox-group v-model="checkList" @change="change">
            <el-checkbox
              v-for="item in departments"
              :key="item.id"
              :label="item.name"
            >
              {{ item.name }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <!-- 部门过滤结束 -->

        <!-- 考勤状态过滤开始 -->
        <el-form-item label="考勤状态过滤：">
          <el-radio-group v-model="stateID" @change="changeState">
            <el-radio
              v-for="item in stateData.holidayType"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
              {{ item.value }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 考勤状态结束 -->

      </el-form>
    </el-card>

    <el-card class="hr-block">
      <el-table :data="tableData" stripe style="width: 100%" border show-overflow-tooltip>

        <el-table-column label="序号" type="index" width="150" />
        <el-table-column prop="username" label="姓名" width="180" />
        <el-table-column prop="workNumber" label="工号" width="180" />
        <el-table-column prop="departmentName" label="部门" width="180" />

        <!-- 插槽渲染表头日期开始 -->
        <el-table-column v-for="(item,index) in tableData[0]&&tableData[0].attendanceRecord" :key="index" width="180">
          <template #header>
            <span>{{ item.day }}</span>
          </template>

          <template #default="{row}">
            <span>{{ row.attendanceRecord[index].adtStatu | value }}</span>
          </template>
        </el-table-column>
        <!-- 插槽渲染表头日期结束 -->

      </el-table>
    </el-card>

    <!-- 分页组件开始 -->
    <el-row type="flex" justify="center" align="middle" style="height: 60px">
      <el-pagination layout="prev, pager, next" :total="pageList.total" :page-size="pageList.pagesize" @current-change="changePage" />
    </el-row>
    <!-- 分页组件结束 -->

  </div>
</template>

<script>
// 此处引入模拟数据
import attendance from '@/api/constant/attendance'
import { getAttendancesListMock } from '@/api/attendances'
import { department } from '@/api/department'
import attendanceApi from '@/api/constant/attendance'
export default {

  // 过滤器
  filters: {
    // 使用枚举数据
    value(oldValue) {
      const obj = attendance.holidayType.find(item => Number(item.id) === oldValue)
      return obj ? obj.value : '未知'
    }
  },
  data() {
    return {
      // 考勤状态
      stateData: attendanceApi,
      // 总的数据表格数据渲染
      tableData: JSON.parse(localStorage.getItem('tableDate')) || [],

      // 获取部门
      departments: [],

      //  选中的部门情况
      checkList: [],

      // 考勤状态
      stateID: [],

      // 分页数据
      pageList: {
        page: 1,
        pagesize: 5,
        total: 0
      }
    }
  },

  // 页面初始化
  async created() {
    // 进页面判断是否有数据
    const num = localStorage.getItem('tableDate')
    if (!num) {
      // 发送数据
      const res = await getAttendancesListMock()
      console.log(100, res)
      // 保存到缓存
      localStorage.setItem('tableDate', JSON.stringify(res))
    }

    // 调用函数
    this.getAttendancesListMock()
    this.getDepartments()
  },

  // 函数
  methods: {
    // 获取部门数据
    async getDepartments() {
      const res = await department()
      // 调用函数
      this.departments = res.depts
    },

    // 获取模拟数据
    async getAttendancesListMock() {
      // 总条数
      this.pageList.total = JSON.parse(localStorage.getItem('tableDate')).length
      // 判断是否有部门筛选情况,表格数据重新渲染
      if (this.checkList.length > 0) {
        this.tableData = JSON.parse(localStorage.getItem('tableDate'))
        this.tableData = this.tableData.filter(item => this.checkList.includes(item.departmentName))
        console.log(this.tableData)
        // 更改页码数据
        this.pageList.total = this.tableData.length
        this.pageList.pagesize = this.tableData.length
      } else {
        this.tableData = JSON.parse(localStorage.getItem('tableDate'))
        // 截取数组
        this.tableData = this.tableData.slice(1, 6)
      }
    },

    // 分页功能
    changePage(newPage) {
      this.tableData = JSON.parse(localStorage.getItem('tableDate'))
      console.log(newPage)
      if (newPage === 1) {
        this.tableData = this.tableData.slice(1, 6)
      } else {
        console.log(1)
        this.tableData = this.tableData.slice(6 * newPage - 6, 6 * newPage - 1)
      }
    },

    // 点击部门筛选数据
    change(e) {
      console.log(e)
      this.checkList = e
      this.getAttendancesListMock()
    },

    //  考勤状态的筛选状态
    changeState(e, index) {
      console.log(this.stateID)
    }

  }
}
</script>

<style>

</style>
